<template>
    <view class="container">
        <u-navbar back-text="" height="66">
            <view class="text-area">
                <u-field v-model="keyword" :placeholder="hintText" icon="search" label-width="30"
                    :border-bottom="false" @confirm="search(1,keyword)" :clearable="false"></u-field>
            </view>
        </u-navbar>
        <view class="wrapper">
            <view class="history" v-if="history.length > 0">
                <view class="title o-flex o-flex-justify-space-between">
                    <view>
                        历史搜索
                    </view>
                    <text class="icon icon-del" style="color: #fc4f75;" @click="removeHistory"></text>
                </view>
                <view class="flex-content">
                    <view class="history-item" v-for="(item, idx) in history" :key="idx" @click="search(2,item)">
                        <view v-if="idx < limit" >{{ item }}</view>
                    </view>
                    <view class="more" v-if="history.length > limit" @click="showMore">更多</view>
                </view>
            </view>
            <view class="hot" v-if="showHot">
                <view class="title">
                    {{ hotName }}
                </view>
                <view class="flex-content">
                    <view class="hot-item" v-for="(item, index) in hot" :key="index" @click="search(3,'',item)">
                        <u-image src="/static/icon/10002.png" width="22" height="24" v-if="index <= 2"></u-image>
                        <text style="margin-left: 10rpx;">{{ item.content }}</text>
                    </view>
                </view>
            </view>
            <view class="recommend" v-if="showRec">
                <view class="title">
                    {{ recName }}
                </view>
            </view>
        </view>
        <view v-if="showRec" class="grid-wrapper">
            <column2 :list="recommend" :config="config"></column2>
        </view>
        <u-modal v-model="showModal" content="确认要删除历史记录吗?" title="" @confirm="confirm" show-cancel-button></u-modal>
    </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { useOrderStore } from '@/store'
import { computed, ref } from 'vue';
import Column2 from '@/components/layout-module/modules/components/Column-2/index.vue'

const keyword = ref('')
const hintText = ref('请输入您想搜索的商品')
const orderStore = useOrderStore()
const showRec = ref(true)
const hotName = ref('热门搜索')
const showHot = ref(true)
const recName = ref('为您推荐')
const recommend = ref<Array<any>>([])
const hot = ref<Array<any>>([])
const showModal = ref(false)
const limit = ref(5)
const config = ref({
    padding: '0px',
    showLabel:false,
    titleStyle:{
        color: 'black',
        fontSize:'28rpx',
        lineHeight:'50rpx'
    },
    priceStyle:{
        color: 'red',
        fontSize:'34rpx',
        lineHeight:'44rpx'
    },
    backgroundColor:'white',
    marginRight:'0px',
    marginBottom: '10rpx',
    borderRadius: '0',
    showStar:false,
    showSuggest:false,
    showPrice:true,
    showSales:false,
    starColor: 'gold',
    useWaterfall:false
})

const history = computed<Array<any>>(()=>{
    return orderStore.searchHistory.reverse().filter((m: any)=>m)
})

onLoad((option: any) => {
    hintText.value = option.keyword
})

init()

function init() {
    uni.$u.$api.BaseApi.queryStoreSearchConfigPageAll().then((res: any) => {
        // 热门搜索
        let hot = res.filter((m: any) => m.id === 10001)[0];
        if (hot && hot.isDisplay === 0) {
            hotName.value = hot.name;
            getHotKeywords();
        } else {
            showHot.value = false;
        }
        // 为您推荐
        let rec = res.filter((m: any) => m.id === 10002)[0];
        if (rec && rec.isDisplay === 0) {
            recName.value = rec.name;
            getReccommends();
        } else {
            showRec.value = false;
        }
    });
}

function search(type: number, word: string, obj?: any) {
    uni.hideKeyboard();
    let filter = {}
    if (type === 1) {
        if (!word) word = hintText.value
        filter = { releaseName: word };
        orderStore.addHistory(word);

    } else if (type === 2) {
        orderStore.addHistory(word);
        filter = { releaseName: word };
    } else {
        if (!obj.url) {
            filter = { releaseName: obj.content }
            word = obj.content
        } else {
            let { urlId, urlType, urlString } = JSON.parse(obj.url)

            if (urlType == 2) {
                filter = { groupId: [urlId] };
                word = obj.content
            }
            if (urlType == 3) {
                filter = { labelIds: [urlId] };
                word = obj.content
            }
            if (urlType == 4) return uni.$u.$MRouter.details.to({ urlId });
            if (urlType == 5) return uni.$u.$MRouter.custom.to({ para : JSON.stringify({ urlString })})
            if (urlType == 6) uni.$u.toast('当前跳转不支持!')
        }
    }
    let para = JSON.stringify({ filter, keyword });

    keyword.value = '';
    uni.$u.$MRouter.list.to({ para });
}

function getReccommends() {
    uni.$u.$api.BaseApi.queryBaseStoreSearchRecommends().then((res: any) => {
        let list: Array<any> = [];
        res.forEach((item: any) => {
            if (!item.goodsReleaseVo) {
                item.goodsReleaseVo = {
                    picId: 200,
                    releaseName: '默认商品',
                    minSalePrice: 0
                };
            }
            list.push(item.goodsReleaseVo);
        });
        recommend.value = list;
    });
}

function getHotKeywords() {
    uni.$u.$api.BaseApi.queryBaseStoreSearchHotWords().then((res: any) => {
        let list: Array<any> = [];
        res.forEach((m: any) => {
            list.push(m);
        });
        hot.value = list;
    });
}

function removeHistory() {
    showModal.value = true
}

function showMore() {
    limit.value += 5;
}
function confirm() {
    orderStore.clearHistory()

    uni.$u.toast('删除成功!');
}
</script>

<style scoped lang="scss">
.container {
        .wrapper{
            padding: 20rpx 30rpx;
        }
        .text-area{
            display: flex;
            align-items: center;
            background-color: #F4F4F4;
            flex: 1;
            margin-right: 30rpx;
            height: 80rpx;
        }

        .flex-content {
            display: flex;
            flex-wrap: wrap;

            .history-item {
                padding: 10rpx 20rpx;
                border-radius: 20px;
                background-color: #eaeaea;
                margin-right: 20rpx;
                margin-bottom: 20rpx;
            }

            .more {
                font-size: 20rpx;
                color: #999999;
                line-height: 60rpx;
                margin-bottom: 20rpx;
                padding: 0 40rpx;

                &::after {
                    font-family: 'iconfont' !important;
                    content: '\e639';
                    margin-left: 9rpx;
                }
            }
        }

        .hot {
            .hot-item {
                margin-bottom: 20rpx;
                padding: 10rpx 30rpx;
                border-radius: 20px;
                background-color: #eaeaea;
                margin-right: 20rpx;
                display: flex;
            }
        }

        .title {
            font-size: 30rpx;
            font-weight: 600;
            line-height: 60rpx;
            margin-bottom: 20rpx;
            font-weight: bold;

            .mr {
                margin-right: 20rpx;
            }
        }
    }
    .grid-wrapper{
        width: 100vw;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .align-items {
        background-color: white;
    }
    // 最后两个元素 不需要 margin bottom
    .align-items:nth-last-child(-n + 2) {
        margin-bottom: 0 !important;
    }

    .align-items:nth-child(even) {
        margin-right: 0 !important;
    }
</style>
